<template>
  <view class="swiper-action"
    @touchstart='handleTouchstart'
    @touchend='handleTouchend'
  >
    <slot></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startTme: 0,
      // 按下的坐标
      startX: 0,
      startY: 0
    }
  },
  methods: {
    handleTouchstart(e) {
      this.startTme = Date.now();
      this.startX = e.changedTouches[0].clientX;
      this.startY = e.changedTouches[0].clientY;

    },
    handleTouchend(e) {
      const endTime = Date.now();
      const endX = e.changedTouches[0].clientX;
      const endY = e.changedTouches[0].clientY;

      if(endTime - this.startTme > 2000) return

      let direction = '';

      if(Math.abs(endX - this.startX)> 10&&Math.abs(endY-this.startY)<10) {
        direction = endX - this.startX>0? 'right': 'left'
      }else {
        return
      }

      this.$emit('swiper-action', {direction})
    }
  }
}
</script>

<style>

</style>